<template>
  <div>
    <div class="bg">
      <div class="box">
        <el-form
          width="500px"
          :model="form"
          :rules="rules"
          ref="form"
          class="form"
        >
          <el-form-item class="title">
            <img src="@/assets/login_logo.png" alt="" /><span class="text1"
              >黑马面面</span
            ><span class="text2">|</span
            ><span class="text3">用户登录</span></el-form-item
          >
          <el-form-item prop="phone">
            <el-input
              v-model="form.phone"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="code" class="code">
            <el-input
              v-model="form.code"
              placeholder="请输入验证码"
              prefix-icon="el-icon-key"
            >
              <template> <i class="el-icon-edit"></i> </template
            ></el-input>
            <img @click="changeCode" :src="img" alt="" />
          </el-form-item>
          <el-form-item prop="checked">
            <el-checkbox v-model="form.checked" fill="#fff"
              >我已阅读并统一<i>用户协议</i>和<i>隐私条款</i></el-checkbox
            >
          </el-form-item>
          <el-form-item>
            <!-- 给button加加载动画 -->
            <el-button
              @click="submit"
              class="loginBtn"
              type="primary"
              :loading="loading"
              element-loading-text="拼命加载中"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              element-loading-spinner="el-icon-loading"
              >登录</el-button
            >
          </el-form-item>
          <el-form-item>
            <!-- 给button加加载动画 -->
            <el-button @click="register" class="loginBtn" type="primary"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <img src="@/assets/login_banner_ele.png" alt="" />
    </div>
    <!-- 注册弹出框 -->
    <Register ref="reg" />
  </div>
</template>

<script>
import { loginCode } from "@/api/login";
import Register from "./MyRegister.vue";
export default {
  data() {
    return {
      // 控制loding的变量
      loading: false,
      form: {
        phone: "18511111111",
        password: "12345678",
        code: "",
        checked: false,
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "change",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "change" },
          { min: 4, max: 4, message: "四位验证码", trigger: "change" },
        ],
        checked: [
          {
            validator(rule, value, callback) {
              if (value) {
                callback();
              } else {
                callback(new Error("请勾选协议"));
              }
            },
            trigger: "change",
          },
        ],
      },
      img: "http://119.91.150.211:8080/heimamm/public/captcha?type=login",
    };
  },
  created() {
    this.changeCode();
  },
  methods: {
    submit() {
      this.$refs.form.validate(async (result) => {
        if (result) {
          this.loading = true;
          try {
            await this.$store.dispatch("login/gettoken", this.form);
            // this.$message.success("登录成功");
            // this.$router.push("/layout");
          } catch (error) {
            console.log(error);
          } finally {
            this.loading = false;
          }
        }
      });
    },
    async changeCode() {
      const res = await loginCode();
      console.log(res);
      this.img = `data:image/png;base64,${btoa(
        new Uint8Array(res).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ""
        )
      )}`;
      // console.log(res);
      // this.$message.info(res.message);
      console.log(this.img);
    },
    register() {
      this.$refs.reg.showReg = true;
    },
  },
  components: { Register },
};
</script>

<style lang="less" scoped>
.bg {
  display: flex;
  justify-content: space-between;
  padding: 190px 90px;
  height: 100%;
  background: linear-gradient(to right, #1493fa, #02c4fa);
  // background-image: url("@/assets/login_banner_ele.png");
  background-repeat: no-repeat;
  .box {
    width: 400px;
    height: 448px;
    margin-right: 200px;
    padding: 40px 0;
    text-align: center;
    background-color: #f5f5f5;
    .form {
      margin: 0 auto;
      width: 320px;

      // .code {
      //   display: flex;
      // }
      ::v-deep .el-form-item__content {
        display: flex;
      }
      .title {
        img {
          object-fit: contain;
        }
        .text1 {
          font: normal 700 26px "微软雅黑 Light";
          padding: 10px;
          // line-height: 55px;
        }
        .text2 {
          line-height: 50px;
          font-size: 26px;
          color: #ccc;
        }
        .text3 {
          margin-left: 10px;
          line-height: 55px;
          font-size: 26px;
          font-family: "幼圆";
        }
      }
      .el-checkbox {
        i {
          font-style: normal;
          color: #1493fa;
        }
      }
      .loginBtn {
        width: 100%;
        font-size: 20px;
      }
    }
    img {
      object-fit: contain;
    }
  }
  ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }
}
</style>
